<template>
    <div id="app" @click="isActive">
        <div id="login-box" v-if="!this.$store.state.isLogin" :class="!$store.state.showLogin ? 'hidden' : ''">
            <Login  @loginSuccess="success()"/>
        </div>
        <div id="pages-box" v-else>
            <div id="menu">
                <Menu/>
            </div>
            <div id="content">
                <router-view/>
            </div>
        </div>
        <div id="Loading">
            <Loading v-show="$store.state.isLoading" :msg="$store.state.loadingMsg" />
        </div>
    </div>
</template>

<script>
    import Menu from './Menu';
    import Login from './pages/Login/Login';
    import store from './store/SessionStorageStore';
    import Loading from '@/components/Loading';
    export default {
        name: 'App',
        components:{
            Login,
            Menu,
            Loading
        },
        data() {
            return{
              
            }
        },
        created() {
            this.getLoginInfo();
        },
        mounted() {
            
        },
        methods: {
            getLoginInfo() {
                this.$store.state.isLoading = true;
                let key = 'Login'
                let userData = store.fetch(key);
                if(userData !== null){
                    this.$store.state.loadingMsg = '加载中'
                    this.$store.state.isLogin = true;
                    this.$store.state.isLoading = false;
                }else{
                    this.$store.state.loadingMsg = '安全检测'
                    let time1 = setTimeout(() => {
                        this.$store.state.loadingMsg = '程序初始化'
                        let time2 = setTimeout(() => {
                            this.$store.state.loadingMsg = '程序加载中'
                            let time3 = setTimeout(() => {
                                this.$store.state.loadingMsg = '加载完成';
                                let time4 = setTimeout(() => {
                                    this.$store.state.isLoading = false;
                                    this.$store.state.showLogin = true;
                                },500)
                            },1000)
                        },1500)
                    },1500)
                }
            },
            isActive() {
                if(window.$LoginTimeOut) {
                    window.$LoginTimeOut();
                }
            }
        }
    }
</script>

<style lang="less">
    @import './assets/styles/reset.less';
    @import './assets/styles/common.less';
    html,body,#app,#login-box{
        width: 100%;
        height: 100%;
        font-family: "微软雅黑";
        font-size: 12px;
        user-select: none;
    }
    #login-box.hidden{
        visibility: hidden;
    }
    #pages-box{
        display: flex;
        height: 100%;
        padding-top: 60px;
        #content {
            flex: 1;
            overflow-x: hidden
        }
    }
</style>
